<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>列表渲染</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<!-- 

	 -->
	<body>
		<!--准备好一个容器-->
		<div id="root">
			<h1>人员列表</h1>
			<!-- 模糊搜索，输入一个关键字如何将搜索到的显示出来。使用v-model和监视属性 -->
			<input type="text" placeholder="请输入名字" v-model="keyWorld" />
			<ul>
				<li v-for="(p,index) in filler" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		const vm = new Vue({
			el: '#root',
			data: {
				name: '尚硅谷',
				keyWorld: "",
				persons: [{
						id: '002',
						name: '李四',
						age: 12,
						sex: "男"
					},
					{
						id: '001',
						name: '张三',
						age: 14,
						sex: "男"
					},
					{
						id: '003',
						name: '王二',
						age: 14,
						sex: "男"
					},
					{
						id: "004",
						name: "二师兄",
						age: 500,
						sex: "男"
					},
					{
						id: '005',
						name: '四季',
						age: 18,
						sex: "女"
					}
				],
				fillerPerson: [],
				fillerPersonComputed: []
			},
			//#region
			/* watch: {
				keyWorld(newValue, oldValue) {
					if (newValue !== oldValue) {
						newValue.trim();
						let tempPerson = this.persons;
						let temp = [this.persons.length];
						if (newValue === "") {
							this.persons = tempPerson;
							return
						}
						for (let i = 0; i < this.persons.length; i++) {
							if (this.persons[i].id.includes(newValue) ||
								this.persons[i].name.includes(newValue) ||
								this.persons[i].age === newValue ||
								this.persons[i].sex.includes(newValue)) {
								temp[temp.length] = this.persons[i]
							}
						}
					}
				}
			}, */
			//#endregion

			watch: {
				/*
				 * filter过滤后，原数组会不会受影响？不会，会返回一个新数组。
				 * 重点：任意字符串都包含一个空字符，如："abcd".indexOf("")返回什么  返回0。
				 */
				keyWorld: {
					immediate: false,
					handler(val) {
						//所以，什么都没有输入时，会返回全部的列表。
						this.fillerPerson = this.persons.filter((p) => {
							let ret = p.name.indexOf(val) !== -1 ||
								p.age == new Number(val) ||
								p.sex.indexOf(val) !== -1
							return ret;
						})
					}
				}
			},
			/**
			 * 使用computed实现过滤。
			 * 计算属性是通过返回值决定东西的。
			 */
			computed: {
				filler() {
					//这里的计算属性依赖keyWorld
					//这个return是计算属性返回的，要不然谁知道计算的结果。
					return this.fillerPersonComputed = this.persons.filter((p) => {
						let ret = p.name.indexOf(this.keyWorld) != -1 ||
							p.age == new Number(this.keyWorld) ||
							p.sex.indexOf(this.keyWorld);
						console.log(p);
						return ret; //这个return是filter返回的符合条件的person
					})
				}
			}
		})
	</script>
</html>